Dans la dernière leçon, nous avons implémenté toute la logique pour obtenir un nouvel élément du processus
principal, tel que celui-ci verrouillé dans la console et dans la leçon précédente, nous avons également créé et stylisé le HTML qui
représentera un tel élément dans notre application, ce qui signifie que nous pouvons maintenant continuer et afficher les éléments
reçus du processus principal.
Et de plus, par système, tout cela se passera bien sûr dans le moteur de rendu de la fenêtre principale.
Donc, pour mettre à jour JS, au lieu de déconnecter ce nouvel élément, nous pouvons maintenant l'ajouter à l'élément items.
Je vais à nouveau séparer toutes les fonctions relatives aux éléments dans un module séparé.
De cette façon, les approches peuvent contrôler la fonction globale de l'application, des éléments comme l'interface utilisateur, etc. et les éléments, et pas seulement le module
créera, peuvent être responsables de la logique des éléments, ce qui signifie que l'ajout d'un élément fera
appel au module d'éléments ajouter un élément en passant au nouvel élément reçu du processus principal.
Créez à nouveau le module items en commençant par l'instruction require.
Les éléments de concert égaux nécessitent des éléments localement, donc faire référence aux éléments évite le fichier dans le répertoire Renderer car c'est là
que nous en avons besoin pour les nouveaux éléments de fichier.
Oui, jusqu'à présent, nous appelons la fonction d'ajout d'élément sur ce module.
Commencez donc par créer cette exportation de fonction exportée, pas ajouter d'élément, pas de module, pas d'exporter cette fois-ci,
comme l'exportera plusieurs fonctions sur ce module, c'est une fonction comme nous l'appelons ici.
Donc, prendre le nouvel élément comme seul argument équivaut à une fonction, le paramètre d'élément étant ce nouvel
élément.
Ensuite, nous pouvons créer un nouvel élément HTML, comme nous l'avons stylé précédemment.
Laissez l'élément noter un point de document égal créer un élément de développement.
Un signe de la classe que nous avons stylisée telle que nous l'avons à l'esprit, DOCSIS read item.
Item note dot set attribut classe article Reid Desh.
Ensuite, nous pouvons ajouter le HTML interne à ce nouvel appareil en étant l'image miniature et le point
de note de l'élément de titre dans notre HTML équivaut à l'utilisation d'un modèle littéral pour une meilleure lisibilité, une balise d'image avec un attribut
source de l'élément.
Cet élément présente ici une capture d'écran de l'URL des données de cet élément, une capture d'écran de la balise de titre H2 avec
le titre du titre du point de l'élément de l'élément et enfin l'ajoute au conteneur d'éléments.
Nous n'avons pas de référence à la note sur les éléments dans ce module, alors créez-la.
Laisser les éléments égaux au document n'obtient pas l'élément par I. RÉ..
Les éléments sont identiques à ceux des approches a en attente du nouvel élément non aux éléments div avec éléments point
ajouter l'élément enfant A. Nous pouvons tester cette sauvegarde.
Ajoutez un nouvel élément.
Je vais refaire l'électron STG.
Et une seconde plus tard, cet élément est ajouté à notre application avec nos styles existants.
Notez également que le message aucun élément n'est plus visible car il est masqué par cet élément, une solution pratique pour ne
pas avoir à l'afficher et à le masquer manuellement.
Je vais faire un autre mot, GitHub dot com.
Et cela fait, nous ajoutons maintenant avec succès des éléments à notre application, mais lorsque je recharge, la fenêtre a disparu.
L'étape suivante consiste donc à conserver ou à stocker des éléments dans notre application.
Par souci de simplicité, j'utiliserai le stockage local, le boulon de stockage déjà disponible dans tous
les navigateurs.
En aucun cas, si vous vous rappelez de la session, moins dans le stockage local est stocké dans la session électronique par
défaut.
Donc, une option de stockage parfaitement fiable pour des données simples comme celle-ci dans les éléments suggère que je vais créer un tableau
pour contenir tous les éléments.
De cette façon, nous avons une variable à gérer et à conserver.
Exportations, stockage de points, stockage étant le nom du tableau pour contenir les éléments, équivaut à un tableau vide pour le
moment.
Ensuite, ajoutez la fonction de module pour aider la matrice
de stockage ou les exportations de tableau
d'éléments.
La fonction d'élément défini crée ou remplace une clé dans le stockage local, stockant nos éléments sur des éléments
redit.
La clé de stockage local nomme ce stockage.
Mais le stockage local ne prend en charge que des chaînes simples, pas des objets.
Donc, string afie cet objet tableau vaut la chaîne de points json Afie là chaque fois que save est appelé ou que les items dot
save.
Nous stockons tout ce tableau d'éléments sous forme de chaîne dans le stockage local, ce qui signifie qu'à chaque démarrage de l'application, vous
souhaiterez également définir la matrice de stockage sur la valeur de la clé des éléments dans le stockage local.
Donc, en rechargeant tous nos éléments, nous pouvons obtenir ce tableau à partir du stockage local
immédiatement lorsque ce module est requis avec le stockage local dot get item reedit items.
Cette clé dans laquelle nous enregistrons à nouveau nos éléments, en gardant à l'esprit que nous l'avons stockée sous forme de chaîne.
Alors reconvertissez-le en tableau avec Jason Dort Pass.
Si cette entrée n'existe pas, voudra toujours ledit stockage dans un tableau vide.
Donc, en utilisant un simple say conditionnel ou un tableau vide, nous devrons nous assurer qu'à chaque fois qu'un nouvel élément est ajouté, il
entre dans ce tableau de stockage.
Donc, immédiatement après avoir ajouté un élément, nous pouvons l'ajouter à la matrice de stockage et posséder cette matrice dans
le stockage local.
Cet élément de poussée de stockage, l'objet d'élément que nous avons ajouté, appelant immédiatement après la mise à jour du test d'entrée de stockage local
non sécurisé, cela, bien sûr, nous n'avons aucun élément lorsque l'application a été relancée.
Donc, rajoutez GitHub dot com, ce qui signifie que cet élément aura maintenant été ajouté au stockage des points des éléments et retourné
au stockage local.
Nous pouvons vérifier cela dans l'onglet d'application des outils de développement.
Stockage local.
Là, nous voyons la clé des éléments lus avec sa valeur automatiquement transmise et enregistrée dans la console
appropriée, un tableau avec une entrée étant cet objet d'élément unique.
Développez cela et nous voyons le titre de la capture d'écran et votre URL.
Pourtant, lorsque nous rechargeons cette fenêtre, nos éléments ont disparu, nous les avons peut-être sauvegardés, mais nous ne rajoutons pas
les éléments stockés lorsque la fenêtre se charge.
Alors faisons ça.
Ajoutez des éléments du stockage.
Ce tableau, lors des téléchargements, nous pouvons simplement boucler le tableau de stockage et ajouter manuellement chaque élément, ce
stockage stocké pour chacun, en nous fournissant l'élément dans la fonction de boucle, en appelant cet élément dot add, cette fonction ici avec
l'élément actuel dans la boucle .
Le seul problème maintenant est que si nous faisons cela, nous allons pousser chaque élément existant dans la matrice de stockage
une deuxième fois et l'enregistrer, pas ce que nous voulons.
Nous allons donc avoir besoin d'une condition ici.
Si est nouveau, un argument de fonction sera créé.
Maintenant, ajoutez et enregistrez l'élément add qui est le nouvel argument de la fonction.
Avec une valeur par défaut de false, donc pas un nouvel élément, ce qui signifie que cela fonctionnera désormais comme prévu et n'ajoutera pas les éléments
une deuxième fois, false étant la valeur par défaut.
Mais dans Abduh, c'est lors de l'ajout d'un nouvel élément, nous pouvons dire que le deuxième argument est vrai uniquement en ayant des éléments
frais du processus principal poussés et persistants dans le tableau de stockage.
Testez à nouveau.
Je vais tout sauver.
Et immédiatement, notre élément existant est affiché lorsque l'application se lance, ajoutez-en un autre.
Org. De points d'électrons
Nous voyons maintenant deux éléments dans l'entrée de stockage local lorsque ce nouvel élément a été stocké, rechargez et les deux éléments sont
chargés.
C'est ainsi que les éléments sont réalisés et conservés dans la leçon suivante, nous pouvons créer le code pour sélectionner le filtre
et ouvrir les éléments.